<template>
  <view class="publish-idle-page">
    <!-- 自定义导航栏 -->
    <nav-bar title="发布闲置" :show-back="true"></nav-bar>
    
    <view class="form-container">
      <!-- 发布类型选择 -->
      <view class="form-item">
        <view class="form-label">发布类型</view>
        <view class="type-selector">
          <view 
            class="type-option" 
            :class="{ active: publishType === 'sell' }"
            @click="publishType = 'sell'"
          >
            <text>出售</text>
          </view>
          <view 
            class="type-option" 
            :class="{ active: publishType === 'buy' }"
            @click="publishType = 'buy'"
          >
            <text>求购</text>
          </view>
        </view>
      </view>
      
      <!-- 标题 -->
      <view class="form-item">
        <view class="form-label">标题<text class="required">*</text></view>
        <input 
          class="form-input" 
          type="text" 
          v-model="formData.title" 
          placeholder="简要描述物品，最多30字"
          maxlength="30"
        />
      </view>
      
      <!-- 分类 -->
      <view class="form-item">
        <view class="form-label">分类<text class="required">*</text></view>
        <view class="form-input category-selector" @click="showCategoryPicker = true">
          <text>{{ formData.category || '请选择分类' }}</text>
          <tn-icon name="chevron-right" size="24"></tn-icon>
        </view>
      </view>
      
      <!-- 价格 -->
      <view class="form-item">
        <view class="form-label">价格<text class="required">*</text></view>
        <view class="price-input">
          <text class="price-symbol">¥</text>
          <input 
            class="form-input price-value" 
            type="digit" 
            v-model="formData.price" 
            placeholder="0.00"
          />
        </view>
      </view>
      
      <!-- 详细描述 -->
      <view class="form-item description-item">
        <view class="form-label">详细描述<text class="required">*</text></view>
        <textarea 
          class="form-textarea" 
          v-model="formData.description" 
          placeholder="请详细描述物品的新旧程度、规格型号、使用感受等信息"
          maxlength="500"
        ></textarea>
        <view class="word-count">{{ formData.description.length }}/500</view>
      </view>
      
      <!-- 图片上传 -->
      <view class="form-item">
        <view class="form-label">上传图片<text class="tips">(最多9张，拖拽可排序)</text></view>
        <view class="image-uploader">
          <view 
            v-for="(image, index) in formData.images" 
            :key="index"
            class="image-preview"
          >
            <image :src="image" mode="aspectFill"></image>
            <view class="delete-btn" @click="removeImage(index)">
              <tn-icon name="close" size="20" color="#ffffff"></tn-icon>
            </view>
          </view>
          
          <view class="upload-btn" @click="chooseImage" v-if="formData.images.length < 9">
            <tn-icon name="add" size="40" color="#999999"></tn-icon>
          </view>
        </view>
      </view>
      
      <!-- 联系方式 -->
      <view class="form-item">
        <view class="form-label">联系方式<text class="required">*</text></view>
        <input 
          class="form-input" 
          type="text" 
          v-model="formData.contact" 
          placeholder="手机号/微信号"
        />
      </view>
      
      <!-- 交易地点 -->
      <view class="form-item">
        <view class="form-label">交易地点</view>
        <input 
          class="form-input" 
          type="text" 
          v-model="formData.location" 
          placeholder="如：图书馆、宿舍楼等"
        />
      </view>
    </view>
    
    <!-- 底部提交按钮 -->
    <view class="bottom-submit safe-area-inset-bottom">
      <tn-button
        class="submit-btn"
        background-color="#32C5FF"
        shape="round"
        width="90%"
        :disabled="!isFormValid"
        @click="submitForm"
      >
        发布
      </tn-button>
    </view>
    
    <!-- 分类选择器弹窗 -->
    <tn-popup
      v-model:show="showCategoryPicker"
      mode="bottom"
    >
      <view class="picker-container">
        <view class="picker-header">
          <view class="header-cancel" @click="showCategoryPicker = false">取消</view>
          <view class="header-title">选择分类</view>
          <view class="header-confirm" @click="confirmCategory">确认</view>
        </view>
        <picker-view
          class="picker-view"
          :indicator-style="'height: 80rpx;'"
          :value="[categoryIndex]"
          @change="categoryChange"
        >
          <picker-view-column>
            <view class="picker-item" v-for="(item, index) in categories" :key="index">
              {{ item }}
            </view>
          </picker-view-column>
        </picker-view>
      </view>
    </tn-popup>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue';
import NavBar from '@/components/navbar/NavBar.vue';

// 发布类型
const publishType = ref('sell');

// 分类选择器
const showCategoryPicker = ref(false);
const categoryIndex = ref(0);
const categories = [
  '数码电子',
  '书籍教材',
  '服装鞋帽',
  '美妆护肤',
  '日用百货',
  '运动户外',
  '玩具娱乐',
  '家居家电',
  '其他'
];

// 表单数据
const formData = ref({
  title: '',
  category: '',
  price: '',
  description: '',
  images: [],
  contact: '',
  location: ''
});

// 表单校验
const isFormValid = computed(() => {
  return (
    formData.value.title.trim() !== '' &&
    formData.value.category &&
    formData.value.price.trim() !== '' &&
    formData.value.description.trim() !== '' &&
    formData.value.contact.trim() !== ''
  );
});

// 选择分类
const categoryChange = (e) => {
  categoryIndex.value = e.detail.value[0];
};

// 确认分类选择
const confirmCategory = () => {
  formData.value.category = categories[categoryIndex.value];
  showCategoryPicker.value = false;
};

// 选择图片
const chooseImage = () => {
  uni.chooseImage({
    count: 9 - formData.value.images.length,
    success: (res) => {
      formData.value.images = [...formData.value.images, ...res.tempFilePaths];
    }
  });
};

// 移除图片
const removeImage = (index) => {
  formData.value.images.splice(index, 1);
};

// 提交表单
const submitForm = () => {
  // 表单校验
  if (!isFormValid.value) {
    uni.showToast({
      title: '请填写必填项',
      icon: 'none'
    });
    return;
  }
  
  // 显示加载提示
  uni.showLoading({
    title: '发布中...'
  });
  
  // 模拟请求延时
  setTimeout(() => {
    // 隐藏加载提示
    uni.hideLoading();
    
    // 显示成功提示
    uni.showToast({
      title: '发布成功',
      icon: 'success',
      duration: 2000,
      success: () => {
        // 延迟返回上一页
        setTimeout(() => {
          uni.navigateBack();
        }, 1500);
      }
    });
  }, 1500);
};
</script>

<style lang="scss" scoped>
.publish-idle-page {
  min-height: 100vh;
  background-color: #f8f8f8;
  padding-bottom: 120rpx;
}

.form-container {
  padding: 20rpx;
}

.form-item {
  background-color: #ffffff;
  padding: 24rpx;
  border-radius: 16rpx;
  margin-bottom: 20rpx;
  
  .form-label {
    font-size: 28rpx;
    font-weight: bold;
    margin-bottom: 20rpx;
    
    .required {
      color: #FF5252;
      margin-left: 6rpx;
    }
    
    .tips {
      color: #999;
      font-size: 24rpx;
      font-weight: normal;
      margin-left: 10rpx;
    }
  }
  
  .form-input {
    font-size: 28rpx;
    padding: 16rpx 0;
    width: 100%;
    border-bottom: 1px solid #f0f0f0;
    
    &.category-selector {
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: #333;
    }
  }
  
  .form-textarea {
    width: 100%;
    height: 240rpx;
    font-size: 28rpx;
    padding: 16rpx 0;
    line-height: 1.6;
  }
}

.type-selector {
  display: flex;
  border-radius: 12rpx;
  overflow: hidden;
  
  .type-option {
    flex: 1;
    text-align: center;
    padding: 20rpx 0;
    background-color: #f8f8f8;
    
    &.active {
      background-color: #32C5FF;
      color: #ffffff;
    }
  }
}

.price-input {
  display: flex;
  align-items: center;
  
  .price-symbol {
    font-size: 32rpx;
    font-weight: bold;
    margin-right: 10rpx;
    color: #FF5252;
  }
  
  .price-value {
    border-bottom: 1px solid #f0f0f0;
    flex: 1;
    color: #FF5252;
    font-weight: bold;
  }
}

.description-item {
  position: relative;
  
  .word-count {
    position: absolute;
    bottom: 24rpx;
    right: 24rpx;
    font-size: 24rpx;
    color: #999;
  }
}

.image-uploader {
  display: flex;
  flex-wrap: wrap;
  
  .image-preview, .upload-btn {
    width: 200rpx;
    height: 200rpx;
    margin-right: 16rpx;
    margin-bottom: 16rpx;
    border-radius: 12rpx;
    overflow: hidden;
  }
  
  .image-preview {
    position: relative;
    
    image {
      width: 100%;
      height: 100%;
    }
    
    .delete-btn {
      position: absolute;
      top: 10rpx;
      right: 10rpx;
      width: 40rpx;
      height: 40rpx;
      background-color: rgba(0, 0, 0, 0.5);
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
  
  .upload-btn {
    background-color: #f0f0f0;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px dashed #ddd;
  }
}

.bottom-submit {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #ffffff;
  padding: 20rpx 0;
  display: flex;
  justify-content: center;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.picker-container {
  background-color: #ffffff;
  height: 500rpx;
  
  .picker-header {
    display: flex;
    justify-content: space-between;
    padding: 24rpx;
    border-bottom: 1px solid #f0f0f0;
    
    .header-cancel {
      color: #999;
    }
    
    .header-title {
      font-weight: bold;
    }
    
    .header-confirm {
      color: #32C5FF;
    }
  }
  
  .picker-view {
    height: 400rpx;
    
    .picker-item {
      line-height: 80rpx;
      text-align: center;
      font-size: 32rpx;
    }
  }
}
</style> 